<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">  
		<view class="body"> 
			<template >
				<view class="goods-wrap m-b2"> 
					<u--form :model="form" ref="uForm" class="form-wrap"> 						 
						<u-form-item label="发货仓库" labelWidth="160" prop="storehouse_name" borderBottom="true" class="u-form-item" @click="storehouse.isShow=true;storehouse_type=1">
							<u-input v-model="form.storehouse_name" placeholder="选择发货仓库" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>						
						</u-form-item>
						<u-form-item label="入库仓库" labelWidth="160" prop="last_receive_user_name" borderBottom="true" class="u-form-item" @click="storehouse.isShow=true;storehouse_type=2">
							<u-input v-model="form.last_receive_user_name" placeholder="选择入库仓库" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>						
						</u-form-item>
					</u--form> 
				</view>
				
				<view class="goods-wrap" v-for="(item,index) in form.goods" :key="index">
					<view class="hd-title">
						<u--text class="" :text="'货物清单('+(index+1)+')'" size="30" align="left" bold></u--text>
						<u-icon v-if="index>0" name="trash" :size="42" color="#ff0000" @click="delGoods(index)"></u-icon>
					</view>				
					<u--form :model="form" ref="uForm" class="form-wrap"> 
						<u-form-item label="货物类别" labelWidth="160" prop="p_name" borderBottom="true" class="u-form-item"  @click="form.goodsIndex=index;select('category')">
							<u-input v-model="item.p_name" placeholder="选择货物类别" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>						
						</u-form-item>
						<u-form-item v-if="item.p_name" label="货物名称" labelWidth="160" prop="pname" borderBottom="true" class="u-form-item" @click="form.goodsIndex=index;select('product')">
							<u-input v-model="item.pname" placeholder="选择货物名称" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>						
						</u-form-item> 
						<template v-if="item.pname">
							<u-form-item label="仓库库存" labelWidth="160" prop="unit" borderBottom="true" class="u-form-item">
								<u-input type="digit" class="text-inp" v-model="item.p_count" disabled disabledColor="#ffffff" border="none" placeholder="输入仓库库存"/>
								<u--text class="text-unit" :text="item.unit" size="30" align="right" ></u--text>
							</u-form-item> 
							<view class="row-2">
								<u-form-item label="申请数量" labelWidth="160" prop="unit" borderBottom="true" class="u-form-item" style="flex-grow: 2;"> 
									<u-input type="digit" class="text-inp" v-model="item.count"  border="none" placeholder="输入成品数量"/>
									<u--text class="text-unit" :text="item.unit" size="30" align="right" style="width: 50rpx;"></u--text>
								</u-form-item>
								<u-button text="选择单位" type="success" size="small" class="btn m-l2" style="width: 100rpx;" @click="units.isShow=true"></u-button>
							</view> 
						</template> 
					</u--form>
				</view>				
			
			
				<view class="m-t2 m-l2 m-r2 m-b2">
					<u-button  type="primary" :plain="true" :hairline="true" text="新增货物" @click="addGoods"></u-button>
				</view>			
				
				<view class="goods-wrap m-b2">
					<view class="hd-title">
						<u--text class="" text="申请原因" size="30" align="left" bold></u--text> 
					</view>	
					<u--textarea v-model="form.decript"  placeholder="请输入申请原因" count ></u--textarea>
				</view>
				
				<view class="goods-wrap m-b2">
					<view class="hd-title">
						<u--text class="" text="上传图片(订单凭证/图片)" size="30" align="left" bold></u--text> 
					</view>	
					<view class="upload-wrap">
						<u-upload
							width="180"
							height="180"
							:fileList="form.fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							:previewFullImage="true"
							name="1"
							multiple
							:maxCount="10"
						></u-upload>
					</view>
					
				</view>
				
				<view class="goods-wrap"> 
					<u--form :model="form" ref="uForm" class="form-wrap"> 						 
						<u-form-item label="审批人" labelWidth="160" prop="apply_user_name" borderBottom="true" class="u-form-item" @click="applyuser.isShow=true">
							<u-input v-model="form.apply_user_name" placeholder="选择审批人" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
							<u-icon	slot="right" name="arrow-right"></u-icon>						
						</u-form-item>
					</u--form> 
				</view> 				
			
			</template>
			
			<template v-if="page=='detail'">
				<u--form :model="form" ref="uForm" class="form-wrap">
					<u-form-item label="材料名称" labelWidth="160" prop="pname" borderBottom="true" class="u-form-item">
						<u-input v-model="form.pname" disabled disabledColor="#ffffff" placeholder="输入材料名称" border="none" />
					</u-form-item> 
					<u-form-item label="数量" labelWidth="160" prop="number" borderBottom="true" class="u-form-item">
						<u-input v-model="form.number" disabled disabledColor="#ffffff" placeholder="输入数量" border="none" />
					</u-form-item> 
					<u-form-item label="最小单位" labelWidth="160" prop="unit_name" borderBottom="true" class="u-form-item" >
						<u-input v-model="form.unit_name" disabled disabledColor="#ffffff" border="none" placeholder="选择单位" />									
					</u-form-item> 
					<u-form-item label="材料类别" labelWidth="160" prop="partstypename" borderBottom="true" class="u-form-item">
						<u-input v-model="form.partstypename" placeholder="选择材料类别" disabled disabledColor="#ffffff" border="none" />										
					</u-form-item> 
				</u--form>
			 		
			</template>
			
			<u-picker :show="pcategory.isShow" :columns="pcategory.data" keyName="name" :defaultIndex="[0]" itemHeight="90" :closeOnClickOverlay="true" @cancel="pcategory.isShow=false" @confirm="changepcategory" @close="pcategory.isShow=false"></u-picker>
			
			<u-picker :show="pnames.isShow" :columns="pnames.data" keyName="name" :defaultIndex="[0]" itemHeight="90" :closeOnClickOverlay="true" @cancel="pnames.isShow=false" @confirm="changepnames" @close="pnames.isShow=false"></u-picker>
			<u-picker :show="units.isShow" :columns="units.data" keyName="uname" :defaultIndex="[0]" itemHeight="90" :closeOnClickOverlay="true" @cancel="units.isShow=false" @confirm="changeunit" @close="units.isShow=false"></u-picker>
			<u-picker :show="storehouse.isShow" :columns="storehouse.data" keyName="sname" itemHeight="90" :closeOnClickOverlay="true" @cancel="storehouse.isShow=false" @confirm="changestorehouse" @close="storehouse.isShow=false"></u-picker>
			<u-picker :show="applyuser.isShow" :columns="applyuser.data" keyName="realname" itemHeight="90" :closeOnClickOverlay="true" @cancel="applyuser.isShow=false" @confirm="changeapplyuser" @close="applyuser.isShow=false"></u-picker>
			  
			 
		</view>  
		<c-footer > 
			<view  slot="content" class="add-btn" @click="add">提交</view> 
			
		</c-footer>
	</view>
</template>

<script>
	import {uploadToServe} from '@/common/util.js'
	import {IMG_PATH} from '../../config.js'
	export default {
		data() {
			return {
				id:'',
				apply_id:'',
				isLogin:true, 
				isIphoneX:getApp().globalData.isIphoneX, 
				systemInfo:getApp().globalData.systemInfo,
				isShowSearch:false,
				type:'', 
				page:'',
				list:[], 
				storehouse_type:1,
				form: {
					goodsNum:-1,
					goods:[
					// 	{
					// 	pname:'',
					// 	pname_id:'',
					// 	p_id:'', 
					// 	p_name:'',
					// 	p_count:'',
					// 	count:'',
					// 	price:'',
					// 	oneprice:'',
					// 	unit_id:'',
					// 	unit:'',
					// 	units:[]
					// },
					], 
					apply_user_id:'',
					apply_user_name:'',
					// price:'',
					fileList1:[],
					decript:'',
					storehouse_name:'',
					last_receive_user:'',
					last_receive_user_name:'',
					storehouse_id:'',
					storehouse_uid:'', 
					goodsIndex:0,
					nameIndex:0,
					pname:'',					 
					partstype:'',
					partstypename:'',  				 
					status:1, 
					 
				},
				pcategory:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				pnames:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				partstype:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				units:{					 
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				applyuser:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				partslist:{
					isShow:false,
					data:[[]],
					defaultIndex:[]
				},
				storehouse:{
					isShow:false,
					data:[],
					defaultIndex:[]
				},				 
				hp_count:[]
			}
		},
		async onLoad(params) { 
			console.log('params',params)
			if(params.apply_id){
				this.apply_id=params.apply_id;
			}
			this.type=params.type;
			this.page=params.page;
			let title=''; 
			// this.productcategorylist();
			this.productstorehouse();
			this.productapplyuser();
			if(this.apply_id){
				this.catch_order=await this.getmedetails();
				this.form.goods=[];
				this.form.goodsNum=this.catch_order.product_list.length-1;  
				this.form.storehouse_name=this.catch_order.sname.sname;
				this.form.storehouse_id=this.catch_order.sname.id; 
				this.form.storehouse_uid=this.catch_order.sname.storehouseman;
				this.form.last_receive_user_name=this.catch_order.send_sname.sname;
				this.form.last_receive_user=this.catch_order.send_sname.storehouseman;
				this.form.decript=this.catch_order.apply_reason; 
				 
				this.catch_order.product_list.forEach((item,index)=>{
					let good_item={};
					good_item.pname=item.pname;
					good_item.pname_id=item.p_id;
					good_item.p_id=item.pcategoryid;
					good_item.p_name=item.cate_name;
					good_item.count=item.p_count; 
					good_item.unit_id=item.unit_id;
					good_item.unit=item.uname;
					good_item.units=item.m_unit; 
					
					item.hp_count.forEach(j=>{
						if(j.sname==this.form.storehouse_name){
							good_item.p_count=j.p_count;
						}
					})
					 
					this.form.goods.push(good_item);
				}) 
			} 
			
			
		},
		onShow() {
			
		}, 
		methods: { 
			async getmedetails(){
				let res=await this.$api.user_api.medetails({
					notice_id:this.id,
					apply_id:this.apply_id
				});   
				if(res.data.code==200){  
					this.isshow=true;
					if(res.data.data.m.files_path.length>0){
						res.data.data.m.files_path.forEach(item=>{
							item.files_path=IMG_PATH+item.file_path+'/'+item.files_path; 
						})
					}  
					return res.data.data.m;
					
				}
			}, 
			
			select(type){
				
				if(type=='category'){					
					uni.navigateTo({
						url:`/package_kucun/list-select/list-select?index=${this.form.goodsIndex}&page=category`
					})
				}
				
				if(type=='product'){ 
					uni.navigateTo({
						url:`/package_kucun/list-select/list-select?categoryid=${this.form.goods[this.form.goodsIndex].p_id}&index=${this.form.goodsIndex}&page=product`
					})
				} 				
			},
			
			// 删除图片
			deletePic(event) {
				this.form.fileList1.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let api_url='/api/product/uploadfile';
				let fileListLen = this.form.fileList1.length
				lists.map((item) => {
					this.form.fileList1.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				}) 
				for (let i = 0; i < lists.length; i++) {
					// const result = await this.uploadfile(lists[i].url)
					uploadToServe({
						url: api_url,
						filePath: lists[i].url,
						name: 'fileinput',
						formData: {
							apply_type:1
						}
					}).then((res)=>{ 
						let item = this.form.fileList1[fileListLen]
						this.form.fileList1.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: `${IMG_PATH}${res.data.file_path}/${res.data.file_name}`,
							name:res.data.file_name
						}))
						fileListLen++
						 
					}) 
				}
			},
			 	
			async addGoods(){
				if(this.form.storehouse_name==''){
					this.$showToast({
						title:'请先选择发货仓库' 
					})
					return
				}
				this.form.goodsNum+=1; 
				let data={
					pname:'',
					pname_id:'',
					p_id:'', 
					p_name:'',
					count:'',
					price:'',
					oneprice:'',
					unit_id:'',
					unit:'',
					units:[]
				};  
				
				this.$set(this.form.goods,this.form.goodsNum,data);   
				
			},
			
			delGoods(idx){
				this.form.goodsNum-=1;
				this.form.goods.splice(idx,1);
			},
			 
			 
			
			async add(){
				let {decript,storehouse_uid,apply_user_id,last_receive_user}=this.form;
				
				let goods=[],
				    files=[],
				    product_name=[],
					product_id=[],
					category_id=[],
					p_count=[],
					unitname=[],
					user_unit=[];
					
				for(let i=0;i<this.form.goods.length;i++){
					if(this.form.goods[i].p_count==0 || Number(this.form.goods[i].count)>Number(this.form.goods[i].p_count)){						
						this.$showToast({
							title:this.form.goods[i].pname+'库存不足' 
						})
						return
					}
					if(this.form.goods[i].count==''){
						this.$showToast({
							title:'请填写完整成品信息' 
						})
						return
					}
					if(Number(this.form.goods[i].count)<=0){
						this.$showToast({
							title:'申请数量必须大于0' 
						})
						return
					}
				}
				
				if(storehouse_uid==last_receive_user){
					this.$showToast({
						title:'发货仓库不能跟入库相同' 
					})
					return
				} 
				
				if(decript==''){
					this.$showToast({
						title:'请输入申请原因' 
					})
					return
				}
				
				if(this.form.fileList1.length==0){
					this.$showToast({
						title:'请上传图片' 
					})
					return
				}
				
				
				this.form.goods.forEach(item=>{
					product_name.push(item.pname);
					product_id.push(item.pname_id);
					category_id.push(item.p_id);
					p_count.push(item.count);
					unitname.push(item.unit);
					user_unit.push(item.unit_id); 
				})
				
				this.form.fileList1.forEach(item=>{
					files.push(item.name)
				})
				
				let params={
					product_name:product_name.join(','),
					product_id:product_id.join(','),
					category_id:category_id.join(','),
					p_count:p_count.join(','),
					unitname:unitname.join(','),
					user_unit:user_unit.join(','),
					files:files.join(','),
					decript,
					apply_user_id,
					apply_type:6,
					send_storehouseman:storehouse_uid,
					last_receive_user
				}   
				let res={}; 
				
				res=await this.$api.user_api.sendstorehousesavewx(params);   
				if(res.data.code==200){
					this.$showToast({
						icon:'success',
						title:res.data.msg,
						duration:1000,
					})
					// this.$store.commit('KUCUN_LIST_UPDATE',1);
					setTimeout(()=>{ 
						uni.navigateBack({
							delta:1
						})
					},300)						
				}else{
					this.$showToast({
						icon:'error',
						title:res.data.msg,
						duration:1000,
					})
				}   
			},
			
			changepcategory(e){ 
				let idx=this.form.goodsIndex;
				this.form.goods[idx].p_id=e.value[0].id;
				this.form.goods[idx].p_name=e.value[0].name; 
				this.pcategory.isShow=false; 
				this.outgetproducts(idx,this.form.goods[idx].p_id)
			},
			
			async productcategorylist(){
				let res=await this.$api.user_api.productcategorylist();   
				if(res.data.code==200){  
					this.$set(this.pcategory.data,0,res.data.data); 
					let idx=this.form.goodsIndex;
					this.form.goods[idx].p_id=res.data.data[0].id;
					this.form.goods[idx].p_name=res.data.data[0].name;
					this.outgetproducts(idx,this.form.goods[idx].p_id); 
				}
			},   
			
			changepnames(e){   
				let idx=this.form.goodsIndex;
				this.form.goods[idx].pname=e.value[0].name; 
				this.form.goods[idx].pname_id=e.value[0].id;
				this.pnames.isShow=false;  
				this.outgetunits(idx,e.value[0].unit_id);
				this.sendstorehousecount(idx,e.value[0].id);
			},
			
			async outgetproducts(idx,id){
				let res=await this.$api.user_api.outgetproducts({
					id:id
				});      
				if(res.data.code==200){  
					this.$set(this.pnames.data,0,res.data.data); 
					// this.form.goods[idx].pname=res.data.data[0].name; 
					// this.form.goods[idx].pname_id=res.data.data[0].id; 
					// this.outgetunits(idx,res.data.data[0].unit_id);
					// this.sendstorehousecount(idx,res.data.data[0].id);
				}
			}, 
			
			async outgetunits(idx,unit_id){ 
				let res=await this.$api.user_api.outgetunits({
					unit_id:unit_id
				});    
				if(res.data.code==200){   
					let min_uname='';
					res.data.data.forEach(i=>{
						if(i.unit_count==1){
							min_uname=i.uname;
						}
						if(i.unit_count>1){
							i.min_uname=min_uname;
							i.uname=i.uname+'('+i.unit_count+min_uname+'/'+i.uname+')'
						} 
					})
					this.form.goods[idx].units=res.data.data; 
					this.$set(this.units.data,0,this.form.goods[idx].units); 
					this.form.goods[idx].unit=res.data.data[0].uname; 
					this.form.goods[idx].unit_id=res.data.data[0].id; 
				}
			},
			
			async sendstorehousecount(idx,p_id){  
				let res=await this.$api.user_api.sendstorehousecount({
					p_id:p_id,
					storehouse:this.form.storehouse_id
				});    
				if(res.data.code==200){   
					this.form.goods[idx].p_count=res.data.data?Number(res.data.data.p_count):0; 
					this.form.goods[idx].init_count=res.data.data?Number(res.data.data.p_count):0;  
				}
			},		
			
			
			showUnit(idx){
				this.form.goodsIndex=idx; 
				this.units.isShow=true; 
				this.$set(this.units.data,0,this.form.goods[idx].units);   
			},
			
			changeunit(e){    
				this.form.goods[this.form.goodsIndex].p_count=Math.floor(this.form.goods[this.form.goodsIndex].init_count/e.value[0].unit_count);
				this.form.goods[this.form.goodsIndex].unit=e.value[0].uname;
				this.form.goods[this.form.goodsIndex].unit_id=e.value[0].id; 
				this.units.isShow=false;   
			},
			 
			
			
			async productstorehouse(){
				let res=await this.$api.user_api.productstorehouse();  
				if(res.data.code==200){ 
					this.$set(this.storehouse.data,0,res.data.data); 
					// this.form.storehouse_id=res.data.data[0].id;
					// this.form.storehouse_name=res.data.data[0].sname;
					// this.form.storehouse_uid=res.data.data[0].storehouseman;
					
					// this.form.last_receive_user_name=res.data.data[0].sname; 
					// this.form.last_receive_user=res.data.data[0].storehouseman;
				}
			}, 
			
			changestorehouse(e){
				
				if(this.storehouse_type==1){
					this.form.storehouse_name=e.value[0].sname;
					this.form.storehouse_id=e.value[0].id; 
					this.form.storehouse_uid=e.value[0].storehouseman;
					this.storehouse.isShow=false;
					this.storehouse.defaultIndex=e.indexs; 
					 
					this.form.goods.forEach((item,index)=>{
						this.sendstorehousecount(index,item.pname_id)
					})
				}
				
				if(this.storehouse_type==2){
					this.form.last_receive_user_name=e.value[0].sname; 
					this.form.last_receive_user=e.value[0].storehouseman;
					this.storehouse.isShow=false;
					this.storehouse.defaultIndex=e.indexs;  
				}
				
				 
			},
			
			async productapplyuser(){
				let res=await this.$api.user_api.productapplyuser({
					pid:'0',
					process_type:'1'
				});     
				if(res.data.code==200){ 
					this.$set(this.applyuser.data,0,res.data.data.apply_user_list);
					this.form.apply_user_id=this.applyuser.data[0][0].uid;
					this.form.apply_user_name=this.applyuser.data[0][0].realname;
				}
			}, 
			
			changeapplyuser(e){
				this.form.apply_user_name=e.value[0].realname;
				this.form.apply_user_id=e.value[0].uid; 
				this.applyuser.isShow=false;
				this.applyuser.defaultIndex=e.indexs;
			},
			
			async productalllist(cid){
				let res=await this.$api.user_api.productalllist({
					categoryid:cid,
					uid:''
				});     
				if(res.data.code==200){  
					this.$set(this.pnames.data,0,res.data.data); 
					let idx=this.form.goodsIndex; 
					this.form.goods[idx].pname=res.data.data[0].pname; 
					this.form.goods[idx].unit=res.data.data[0].unit_list[0].uname;
					this.form.goods[idx].unit_id=res.data.data[0].unit_list[0].id;
					this.form.goods[idx].units=res.data.data[0].unit_list;
				}
			}, 
			
			
			
			
			 
		},
		computed:{
			totalprice(){
				let totalprice=0;
				let itemprice=0;
				this.form.goods.forEach(item=>{
					totalprice+=item.p_count*item.oneprice;
				})
				return totalprice.toFixed(2);
			},
			list_update(){
				return this.$store.state.caigou_msg_list;
			},
			product_update(){
				return this.$store.state.product_update
			},
			
			category_update(){
				return this.$store.state.category_update
			}
			
		},
		watch:{
			'form.goodsIndex': {
				handler(newer, older) {  
					if(newer!=older&&older){
						this.outgetproducts(newer,this.form.goods[newer].p_id); 
					}								  
				},
				immediate: true, 
			},
			category_update(n,o){
				if(n!=o){ 
					let idx=n.index;
					let item=n.data; 
					this.form.goods[idx].p_id=item.id;
					this.form.goods[idx].p_name=item.name;					 
				}
			},
			
			product_update(n,o){ 
				if(n!=o){ 
					let idx=n.index;
					let item=n.data;					
					this.form.goods[idx].pname=item.name; 
					this.form.goods[idx].pname_id=item.id;  
					this.outgetunits(idx,item.unit_id);
					this.sendstorehousecount(idx,item.id);
					
				}
				
			}
		}
	}
</script>

<style lang="less" >
	.hd-title{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}
	.upload-wrap{
		padding:20rpx;		
		background: #fff;
	}
	.u-form-item{
		.text-inp{
			width: 160rpx;
		}
		.text-unit{
			width: 180rpx;
		}
	}
	.form-wrap{
		padding:0 20rpx; 
		.row-2{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.slot-content{
		.hd{
			padding: 30rpx 0 10rpx;
			font-size: 30rpx;
		}
	}
	.popup-form-wrap{
		padding:20rpx;
		border-radius: 15rpx;		 
	}
	.select-pz-wrap{
		display: flex;
		flex-wrap: wrap;
		.item{
			position: relative; 
			margin:0 20rpx 20rpx 0;
			.del-icon{
				position: absolute;
				right: -15rpx;
				top: -15rpx;
			}
		}
	}
	.add-btn{
		height: 36px;
		line-height: 36px;
		width: 96%;
		margin: 5px auto;
		background: #1cab1b;
		border-radius: 8rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}  
	.partslist-popup{ 
		position: relative;
		height: 100%;
		padding: 0 40rpx; 
		.hd{ 
			height: 40px;
		}
		.select-wrap{
			height: 80%;
			flex-grow: 2;
			margin: 20rpx 0;
			overflow-y: auto; 
			.item{
				margin-bottom: 20rpx;
			}
		}
		.btn-wrap{  
			margin: 20rpx 0;
			.btn{
				margin: 0 30rpx;
			}
		}
	}
</style>
